<template>
  <div class="app-container pt0">
    <div class="form_css">
      <div class="f_title">参展企业报名</div>
      <div class="f_form">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <div class="m-title">选择展区：</div>
          <div class="form_left">
            <el-form-item label="展区名称：" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择展区名称"
                :flat="true"
                :normalizer="myNormalizer"
                class="no_tree"
              />
            </el-form-item>
          </div>

          <div class="m-title">企业信息：</div>
          <div class="form_left">
            <el-form-item label="企业名称：" prop="comName">
              <el-input
                v-model="form.comName"
                placeholder="请输入参展企业名称"
              />
            </el-form-item>
            <el-form-item label="法人代表：" prop="orgName">
              <el-input v-model="form.orgName" placeholder="请输入法人代表" />
            </el-form-item>
            <el-form-item label="信用代码：" prop="idCard">
              <el-input
                v-model="form.idCard"
                placeholder="请输入统一社会信用代码"
              />
            </el-form-item>
            <el-form-item label="联系人：" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人" />
            </el-form-item>
            <el-form-item label="电话：" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="地址：" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="营业执照：" ref="workViod">
              <div>
                <div
                  v-if="form.workUrl"
                  style="width: 100px; height: 100px; position: relative"
                >
                  <div v-if="form.workUrl" class="demo-image__preview w100-img">
                    <el-image
                      :src="form.workUrl"
                      :preview-src-list="[form.workUrl]"
                      class="avatar"
                    >
                    </el-image>
                  </div>
                  <i
                    v-if="form.workUrl"
                    class="el-icon-delete remove-img"
                    @click="removeWorkUrl"
                  />
                </div>
                <uploadBig
                  v-else
                  :showBtn="true"
                  btnText="上传图片"
                  upWidth="50px"
                  upHeight="30px"
                  upLineHeight="30px"
                  :accept="uploadAccept"
                  :showFileList="false"
                  :fileSize="5"
                  @getUpload="uploadWorkUrl"
                />
              </div>
              <div class="w100 small-text" style="line-height: normal">
                提示：建议上传图片大小不超过
                <span class="red">5M！</span> ， 格式为
                <span class="red">{{ uploadAccept }}</span>
                的文件
              </div>
            </el-form-item>
            <el-form-item label="企业封面：" prop="avgUrl" ref="avgViod">
              <div>
                <div
                  v-if="form.avgUrl"
                  style="width: 100px; height: 100px; position: relative"
                >
                  <div v-if="form.avgUrl" class="demo-image__preview w100-img">
                    <el-image
                      :src="form.avgUrl"
                      :preview-src-list="[form.avgUrl]"
                      class="avatar"
                    >
                    </el-image>
                  </div>
                  <i
                    v-if="form.avgUrl"
                    class="el-icon-delete remove-img"
                    @click="removeAvgUrl"
                  />
                </div>
                <uploadBig
                  v-else
                  :showBtn="true"
                  btnText="上传图片"
                  upWidth="50px"
                  upHeight="30px"
                  upLineHeight="30px"
                  :accept="uploadAccept"
                  :showFileList="false"
                  :fileSize="5"
                  @getUpload="uploadAvgUrl"
                />
              </div>
              <div class="w100 small-text" style="line-height: normal">
                提示：建议上传图片大小不超过
                <span class="red">5M！</span> ，宽度不超过
                <span class="red">570px</span>， 格式为
                <span class="red">{{ uploadAccept }}</span>
                的文件
              </div>
            </el-form-item>
            <el-form-item label="企业简介：" prop="companyInfo">
              <el-input
                v-model="form.companyInfo"
                type="textarea"
                placeholder="请输入企业简介，不超过500字"
                :rows="4"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </div>

          <div class="care_css">
            <ul>
              <li>注意：</li>
              <li>
                1.参展商请填写展区、展位号（例：太原展区或一带一路展区8号展位；无展位号的不填）；
              </li>
              <li>
                2.*号项为必填项，否则无法上传。填报信息必须真实有效，否则无法通过审核。
              </li>
            </ul>
          </div>

          <div class="m-title">展区信息：</div>
          <div class="form_left">
            <el-form-item label="展区：">
              <el-input v-model="form.showArea" placeholder="请输入展区" />
            </el-form-item>
            <el-form-item label="展位号：">
              <el-input v-model="form.showNum" placeholder="请输入展位号" />
            </el-form-item>
            <el-form-item label="展品种类：" prop="showType">
              <el-input v-model="form.showType" placeholder="请输入展品种类" />
            </el-form-item>
            <el-form-item label="展品数量：" prop="showNumber">
              <el-input
                v-model="form.showNumber"
                placeholder="请输入展品数量"
              />
            </el-form-item>
            <el-form-item label="展品名称：">
              <el-input v-model="form.showName" placeholder="请输入展品名称" />
            </el-form-item>
            <el-form-item label="参展年限：" prop="joinYear">
              <el-select
                v-model="form.joinYear"
                placeholder="请选择参展年限"
                class="w100"
              >
                <el-option
                  v-for="item in dict.type.sys_exhibit_year"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="展品图片：" prop="showUrl">
              <ul
                v-if="showUrlList && showUrlList.length != 0"
                class="more-big-list form_big_list"
              >
                <li v-for="(item, index) in showUrlList" :key="index">
                  <div v-if="item.img" class="demo-image__preview">
                    <el-image
                      :src="item.img"
                      :preview-src-list="[item.img]"
                      class="avatar"
                    />
                  </div>
                  <el-input
                    v-model="item.info"
                    placeholder="请输入1~40字的图片简介"
                    :maxlength="40"
                    size="small"
                    clearable
                  />
                  <i
                    class="el-icon-delete remove-img"
                    @click="handleRemoveMore(index)"
                  />
                </li>
              </ul>
              <ul class="w100 fl">
                <div>
                  <uploadBig
                    :showBtn="true"
                    btnText="上传展品图片"
                    upWidth="104px"
                    upHeight="30px"
                    upLineHeight="30px"
                    :accept="uploadAccept"
                    :showFileList="false"
                    :fileSize="5"
                    @getUpload="uploadMoreImg"
                  />
                </div>
                <div class="w100 small-text">
                  提示：建议上传分辨率为
                  <span class="red">1012*672</span>
                  ，图片大小不超过<span>5M!</span>， 格式为
                  <span class="red">{{ uploadAccept }}</span>
                  的文件
                </div>
              </ul>
            </el-form-item>
            <el-form-item
              label="自有平台电商链接："
              prop="ownUrl"
              class="own_css"
            >
              <el-input
                v-model="form.ownUrl"
                placeholder="请输入自有平台电商链接，可输入1~256个字符"
                maxlength="256"
              />

              <span style="color: red; font-size: 18px; line-height: normal">
                示例：京东：www.jd.com 淘宝：www.taobao.com
              </span>
            </el-form-item>

            <el-form-item label="">
              <el-button
                class="sub_btn"
                type="primary"
                @click="submitForm"
                :loading="btnLoading"
              >
                提 交
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { addApply } from "@/api/project/paper";
import { deptTreeSelect } from "@/api/system/user";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "User",
  dicts: ["sys_exhibit_year"],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: false,
      btnLoading: false,

      form: {},
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "请选择展区名称", trigger: "change" },
        ],
        comName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        orgName: [
          { required: true, message: "请输入法人代表", trigger: "blur" },
        ],
        idCard: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入电话", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        avgUrl: [
          { required: true, message: "请上传企业封面", trigger: "blur" },
        ],
        companyInfo: [
          { required: true, message: "请输入企业简介", trigger: "blur" },
        ],
        showType: [
          { required: true, message: "请输入展品种类", trigger: "blur" },
        ],
        showNumber: [
          { required: true, message: "请输入展品数量", trigger: "blur" },
        ],
        ownUrl: [
          {
            required: true,
            message: "请输入自有平台电商链接",
            trigger: "blur",
          },
        ],
        joinYear: [
          { required: true, message: "请选择参展年限", trigger: "change" },
        ],
        showUrl: [
          { required: true, message: "请上传展品图片", trigger: "blur" },
        ],
      },

      // 部门树选项
      deptOptions: [],
      showUrlList: [],
      uploadAccept: ".png, .jpg, .jpeg",

      sig: 0,
    };
  },

  created() {
    this.getDeptTree();
    this.reset();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect({ flag: this.sig }).then((response) => {
        this.deptOptions = response.data;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        partId: undefined,
        comName: undefined,
        orgName: undefined,
        idCard: undefined,
        name: undefined,
        mobile: undefined,
        address: undefined,
        workUrl: undefined,
        avgUrl: undefined,
        companyInfo: undefined,
        showArea: undefined,
        showNum: undefined,
        showType: undefined,
        showNumber: undefined,
        showName: undefined,
        joinYear: "2025",
        showUrl: undefined,
        userType: 2,
        sig: this.sig,
      };
      this.resetForm("form");
      this.showUrlList = [];
    },

    /** 提交按钮 */
    submitForm: function () {
      if (this.showUrlList.length != 0) {
        this.form.showUrl = JSON.stringify(this.showUrlList);
      } else {
        this.form.showUrl = "";
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;

          addApply(this.form)
            .then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.reset();
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },

    // 上传营业执照
    uploadWorkUrl(data) {
      this.form.workUrl = data;
      this.$refs.workViod.clearValidate();
    },
    // 移除营业执照
    removeWorkUrl() {
      this.form.workUrl = undefined;
    },

    // 企业封面上传
    uploadAvgUrl(data) {
      this.form.avgUrl = data;
      this.$refs.avgViod.clearValidate();
    },

    // 移除企业封面
    removeAvgUrl() {
      this.form.avgUrl = undefined;
    },

    // 图片相册上传
    uploadMoreImg(data) {
      this.showUrlList.push({
        img: data,
        info: undefined,
      });
    },

    // 移除图片相册
    handleRemoveMore(index) {
      this.showUrlList.splice(index, 1);
    },

    myNormalizer(node) {
      return {
        id: node.id,
        label: node.label,
        parentId: node.parentId,
        isDisabled: Number(node.parentId) < 101,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped>
.form_css {
  width: 700px;
  margin: auto;
}

.f_title {
  width: 100%;
  text-align: left;
  overflow: hidden;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.f_form {
  width: 600px;
  height: auto;
}

.m-title {
  width: 100%;
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form_left {
  width: 100%;
  padding-left: 80px;
}
.sub_btn {
  width: 200px;

  margin-left: 50px;
  margin-top: 30px;
}

.care_css {
  width: 100%;
  height: auto;
  padding-left: 80px;
  font-size: 14px;
  margin-bottom: 20px;
}

.care_css ul li:first-child {
  padding-left: 0;
}
.care_css ul li {
  margin-bottom: 6px;
  padding-left: 20px;
}
</style>

<style>
.own_css .el-form-item__label {
  line-height: normal !important;
}

.own_css .el-form-item__error {
  top: 64px !important;
}
.own_css {
  margin-bottom: 9px !important;
}
</style>
